import React, { Component } from 'react';
import { StyleSheet, View, Text, PixelRatio, TouchableOpacity, ScrollView, Image } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { RadiusGroupCpt } from './RadiusGroupCpt';
import { CheckGroup } from './CheckGroup';
const scale = GLOBAL.SCALE;
/*
    fileData : obj 选中的回显
    goodsClassData : arr 产品分类数据
    corpResultData : arr 合作关系数据
 */
export class FilterCpt extends Component {
    constructor(props) {
        super(props);
        let { fileData } = this.props || {};
        this.state = {

        }
        this.fileData = fileData || {
            // status: 0,
            // corpTypeList: [0, 2],
            // transFlag: 6,
            // teamIdList: null
        };
        this.goodsClassArr = [];
    }
    componentDidMount = () => { }

    componentWillReceiveProps(props) {
        let { corpResultData, fileData } = this.props || {};
        this.goodsClassArr = this._integration() || [];
        this.corpResultData = corpResultData;
        this.fileData = fileData || {};
        this.setState({
            ls: true
        })
    }

    _radiusItemFn = (key, id) => {
        this.fileData[id] = key;
    }

    // check 回调 
    _checkCallBack = (callData) => {
        Object.assign(this.fileData, callData);
    }

    //  产品分类数据整合
    _integration = () => {
        let { goodsClassData } = this.props || {};
        goodsClassData && goodsClassData.map(item => {
            item.dictName = item.teamName;
            item.dictKey = item.teamId;
            return item;
        })
        return goodsClassData;
    }


    render() {
        let { onoffFn } = this.props || {};
        return (
            <View style={styles.box}>
                <View style={styles.boxRight}>
                    <ScrollView style={{ marginBottom: 65 * scale }}>
                        <View style={styles.boxInner}>
                            <Text style={styles.title}>合作关系</Text>
                            <CheckGroup listData={this.corpResultData}
                                id="corpTypeList"
                                selectData={this.fileData.corpTypeList || null}
                                checkCallBack={this._checkCallBack}
                            />
                            <Text style={styles.title}>企业状态</Text>
                            <RadiusGroupCpt data={{
                                title: '运损承担',
                                required: true,
                                listData: [{ dictName: '全部', dictKey: null }, { dictName: '正常', dictKey: 'NORMAL' }, { dictName: '锁定', dictKey: 'LOCKED' }],
                                selectedKey: this.fileData.status || null,
                                _radiusItemFn: this._radiusItemFn,
                                id: 'status'
                            }} />
                            <Text style={styles.title}>交易情况</Text>
                            <RadiusGroupCpt data={{
                                title: '运损承担',
                                required: true,
                                listData: [{ dictName: '全部', dictKey: null }, { dictName: '有交易', dictKey: '1' }, { dictName: '无交易', dictKey: '0' }],
                                selectedKey: this.fileData.transFlag || null,
                                _radiusItemFn: this._radiusItemFn,
                                id: 'transFlag'
                            }} />
                            <Text style={styles.title}>认领情况</Text>
                            <RadiusGroupCpt data={{
                                required: true,
                                listData: [{ dictName: '全部', dictKey: null }, { dictName: '有人认领', dictKey: '1' }, { dictName: '无人认领', dictKey: '0' }],
                                selectedKey: this.fileData.claimFlag || null,
                                _radiusItemFn: this._radiusItemFn,
                                id: 'claimFlag'
                            }} />
                            <Text style={styles.title}>产品线</Text>
                            <CheckGroup listData={this.goodsClassArr}
                                id="teamIdList"
                                selectData={this.fileData.teamIdList || null}
                                checkCallBack={this._checkCallBack}
                            />

                        </View>
                    </ScrollView>
                    <View style={styles.btnBox}>
                        <TouchableOpacity style={styles.btnSubmit} onPress={() => { onoffFn && onoffFn(this.fileData) }}>
                            <Text style={styles.btnSubmitText}>确认</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={[styles.btnSubmit, styles.btnClear]} onPress={() => {
                            this.fileData = {}; onoffFn && onoffFn({
                                status: 0,
                                corpTypeList: null,
                                transFlag: 0,
                                teamIdList: null
                            })
                        }}>
                            <Text style={[styles.btnClearText]}>重置</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    box: {
        width: 320 * scale,
        height: '100%',
        position: 'absolute',
        right: 0,
    },
    boxRight: {
        width: 320 * scale,
        height: '100%',
        backgroundColor: '#fff',
        position: 'absolute',
    },
    boxInner: {
        paddingLeft: 10 * scale,
    },
    title: {
        fontSize: 13 * scale,
        paddingTop: 30 * scale
    },
    btnBox: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        bottom: 0,
        width: '100%',
        height: 65 * scale
    },
    btnSubmit: {
        width: 66 * scale,
        height: 28 * scale,
        backgroundColor: style.color.themeColor,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 4 * scale
    },
    btnSubmitText: {
        color: style.color.white
    },
    btnClear: {
        backgroundColor: style.color.white,
        marginLeft: 15 * scale,
        borderColor: style.color.themeColor,
        borderWidth: 1 * scale / PixelRatio.get(),
    },
    btnClearText: {
        color: style.color.themeColor,

    }
})